<template>
  <div id="sharepictures"> 

    <div class="demo" :style="{  height: dtheight + 'px' }">
        <div  style="display:flex;margin-bottom:10px;align-items: center;">
            <img class="top_img" src="@/assets/images/a8.png" style="width:35px;height:35px;margin-right:10px;"/>
            <div style="line-height: 40px;font-weight:bold:">分享管理</div>
          </div>
     <el-form ref="form"  label-width="100px" style="width:100%;margin-top:20px;">
        <div class="modular1">
           
                <div class="modular1_1">
                    <el-form-item label="微信邀请">
                      <el-upload 
                            action="uploadUrl"  
                            :show-file-list="false"   
                            :before-upload="beforeupload1"
                            :http-request="ImgUploadSectionFile">
                            <div class="avatar-uploader">
                                <img v-if="pic_form1.head_img"  :src="pic_form1.head_img" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </div>
                      </el-upload>
                    </el-form-item>
                    <div style="margin-left:115px;"> 图片大小588*960 </div>
                </div>
                <div class="modular1_1" style="margin-left:30px;">
                     <el-form-item label="公告图片">
                      <el-upload 
                            action="uploadUrl"  
                            :show-file-list="false"   
                            :before-upload="beforeupload2"
                            :http-request="ImgUploadSectionFile">
                            <div class="avatar-uploader">
                                <img v-if="pic_form2.head_img"  :src="pic_form2.head_img" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </div>
                      </el-upload>
                    </el-form-item>
                    <div style="margin-left:140px;"> 图片宽750 </div>
                </div>
                <div class="modular1_1" style="margin-left:30px;">
                    <el-form-item label="软件下载">
                      <el-upload 
                            action="uploadUrl"  
                            :show-file-list="false"   
                            :before-upload="beforeupload3"
                            :http-request="ImgUploadSectionFile">
                            <div class="avatar-uploader">
                                <img v-if="pic_form3.head_img"  :src="pic_form3.head_img" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </div>
                      </el-upload>
                    </el-form-item>
                    <div style="margin-left:115px;"> 图片大小588*1000 </div>
                </div>
            
        </div>
</el-form>
        
         <div class="box_but">
             <div class="but_next" @click="qr_but()">完成</div>
         
          </div>
        
    </div>

   </div>
</template>

<script>

export default {
   name: 'sharepictures',
  data () {
    return {
        dtheight:'500',  //窗口高度
        pic_form1:{
           head_img:'',
           upfile:'',
        },
        pic_form2:{
           head_img:'',
           upfile:'',
        },
        pic_form3:{
           head_img:'',
           upfile:'',
        },
    }
  },
   components:{
 
  },
  created(){
     this.dtheight = window.innerHeight - 160
     this.list_fun()
  },
  mounted (){
    
  },
  methods: {
    list_fun(){
          this.post("/share/pictureData", {
           
	        }).then(res => {
             this.pic_form1.head_img = this.urlimg + res.result.wx_invite_icon
             this.pic_form1.upfile =  res.result.wx_invite_icon

             this.pic_form2.head_img = this.urlimg + res.result.notice_icon
             this.pic_form2.upfile =  res.result.notice_icon

             this.pic_form3.head_img = this.urlimg + res.result.download_icon
             this.pic_form3.upfile =  res.result.download_icon

            console.log(res.result)
         })
      },
      qr_but(){
      
        this.post("/share/setPictureInfo", {
                   wx_invite_icon:this.pic_form1.upfile,
                   notice_icon:this.pic_form2.upfile,
                   download_icon:this.pic_form3.upfile,
                }).then(res => {

                    if(res.error_code == 0){
                        this.open1(res.result,'success')  //提示框
                        this.list_fun()

                    }else {
                     this.open1(res.message,'warning')
                    }
               })
      },
 
    beforeupload1(file){
        if(this.upimglx(file) == false){  //判断是否为fales
              this.upimglxtitle()  //执行弹出错误             
              return false
            }  
            var windowURL = window.URL || window.webkitURL;               
            this.pic_form1.head_img=windowURL.createObjectURL(file);   
            console.log(file)             
            
             this.upimgpost("/image/uploadMultiple",file).then(res => {
               console.log(res.result.url )
               this.pic_form1.upfile = res.result.url    
            })

            return false;

     },
     beforeupload2(file){
        if(this.upimglx(file) == false){  //判断是否为fales
              this.upimglxtitle()  //执行弹出错误             
              return false
            }  
            var windowURL = window.URL || window.webkitURL;               
            this.pic_form2.head_img=windowURL.createObjectURL(file);                
            
             this.upimgpost("/image/uploadMultiple",file).then(res => {
               console.log(res.result.url )
               this.pic_form2.upfile = res.result.url    
            })

            return false;

     },
     beforeupload3(file){
        if(this.upimglx(file) == false){  //判断是否为fales
              this.upimglxtitle()  //执行弹出错误             
              return false
            }  
            var windowURL = window.URL || window.webkitURL;               
            this.pic_form3.head_img=windowURL.createObjectURL(file);                
            
             this.upimgpost("/image/uploadMultiple",file).then(res => {
               console.log(res.result.url )
               this.pic_form3.upfile = res.result.url    
            })

            return false;

     },
    ImgUploadSectionFile(param){//图片上传    
    },

  }
}
</script>


<style scoped>
#indexmonitor{
  padding:2px;
}
.demo{
    overflow-y:auto;
    position: relative;
}
.modular1{
  display:flex;
}
.modular1_1{
  flex: 1;
}
.modular2{
  margin-top: 10px;
}
.box_but{
  display: flex;
  justify-content: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom:10px;
}
.but_next{
   height: 35px;
   width:80px;
   border:1px solid #4F8EFF;
   display: flex;
   align-items: center;
   justify-content: center;
   color:#4F8EFF;
   font-size:14px;
}
.avatar-uploader  {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
  }
  .avatar {
    width: 150px;
    height: 150px;
    display: block;
  }
</style>